Exercises

Pricing Woes

The solution we came up with in the previous lesson has one potential issue: if multiple plans share the same price, the price won't animate:

Update the sandbox below so that the price animates when the user changes plans, even if those plans have the same price.

Acceptance Criteria:

The displayed price should animate whenever the user changes the plan, even if the price doesn't change.

Code Playground

import React from 'react';

import PriceDisplay from './PriceDisplay';

import styles from './PlanSelection.module.css';

function PlanSelection({ plans }) {

const id = React.useId();

const [plan, setPlan] = React.useState(plans[0]);

return (

<legend>Select plan:</legend>

{plans.map((plan) => {

const uniquePlanId = `${id}-${plan.id}`;

return (

<input

type="radio"

name={id}

id={uniquePlanId}

value={plan.value}

onChange={() => setPlan(plan)}

{plan.label}

</label>

</div>

);

})}

</div>

</fieldset>

</>

);

}

export default PlanSelection;

Solution:

Solution code (success)

// PlanSelection.js
import React from 'react';

import PriceDisplay from './PriceDisplay';
import styles from './PlanSelection.module.css';

function PlanSelection({ plans }) {
  const id = React.useId();

  const [plan, setPlan] = React.useState(plans[0]);

  return (
    <>
      <PriceDisplay id={plan.id} price={plan.price} />

      <fieldset className={styles.fieldset}>
        <legend>Select plan:</legend>
        <div className={styles.optionGroup}>
          {plans.map((plan) => {
            const uniquePlanId = `${id}-${plan.id}`;

            return (
              <div className={styles.option} key={plan.id}>
                <input
                  type="radio"
                  name={id}
                  id={uniquePlanId}
                  value={plan.value}
                  onChange={() => setPlan(plan)}
                />
                <label htmlFor={uniquePlanId}>
                  {plan.label}
                </label>
              </div>
            );
          })}
        </div>
      </fieldset>
    </>
  );
}

export default PlanSelection;

// PriceDisplay.js
import React from 'react';
import styles from './PriceDisplay.module.css';

function PriceDisplay({ id, price }) {
  const formattedPrice = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(price);

  return (
    <div className={styles.wrapper}>
      <div key={id} className={styles.animated}>
        {formattedPrice}
      </div>
    </div>
  );
}

export default PriceDisplay;

Passing the entire “plan”? (info)

Our PriceDisplay component is using 2 of the 3 properties on the plan object (both id and price). You might be wondering, might it be a bit simpler to pass the entire plan through?

// Instead of this…
<PriceDisplay id={plan.id} price={plan.price} />

// …why not do this?
<PriceDisplay plan={plan} />

In the last module, we learned about the “Spectrum of Components” 👀. I shared my mental model about how each component should fit neatly on the spectrum between generic, reusable LEGO bricks and high-level business-logic template-like components.

The PriceDisplay component feels to me like a pretty low-level component; I might use it anywhere I want to display a nicely-formatted animated price.

If we pass the entire plan object in, we're saddling the PriceDisplay component. It now has to know exactly how this object is structured, that it has an id field and a price field.

I prefer to pass individual props in situations like this, to keep the low-level component disconnected from any particular higher-level use case.

Toonie Clicker, revisited

Earlier in the course, we created a “Toonie Clicker” game, as a way to learn about lifting state up.

Let's suppose we want to add a little “+2” that shows whenever the coin is clicked:

The markup you need has been provided. Your job is to retrigger the animation whenever the toonie is clicked.

Acceptance Criteria:

Clicking the toonie should show the +2 animation.
The animation should not show when the page originally loads. It should only show when the number of coins changes.

Code Playground

import React from 'react';

import BigCoin from './BigCoin';

import FloatingText from './FloatingText';

import styles from './App.module.css';

function App() {

const [numOfCoins, setNumOfCoins] = React.useState(0);

return (

<main>

<BigCoin

numOfCoins={numOfCoins}

setNumOfCoins={setNumOfCoins}

</FloatingText>

</div>

</main>

Your coin balance:

<strong>{numOfCoins}</strong>

</footer>

</div>

);

}

export default App;

Solution:

Applying the same solution to the earlier exercise? (info)

Now that we know that we can use keys to unmount/remount components, you might be wondering: would it make sense to use the same approach on the PriceDisplay component from Exercise 1?

<PriceDisplay
  key={plan.id}
  price={plan.price}
/>

The answer is yes! We can definitely structure things this way. 😄

In terms of performance, PriceDisplay can be destroyed and recreated pretty quickly (fortunately, the Intl.NumberFormat API is pretty quick). So I'm not worried about that.

The question is: Should PriceDisplay always animate when the price changes? If so, I think it's worth embedding that behaviour within the component, and putting the key on the DOM node within. But if we want to give the consumer the power to decide whether or not to apply the animation, we can lift the key up to the <PriceDisplay> element.

We'll dig a bit more into this distinction in a couple of lessons.

Stretch goal: Only showing on increment

In the real “Cookie Clicker” game, the currency that you build can be spent on tools that improve your cookie-harvesting power. This means that the # of cookies you have goes up when clicking the cookie, but goes down when buying something.

The solution we've come up with above works because the numOfCoins variable can only ever go up by 2, but what if our balance can also decrease?

In the sandbox below, we've added the ability to buy a “piggy bank” for 9 coins. Your goal is to update it so that buying a piggy bank doesn't show the FloatingText keyframe animation.

Acceptance Criteria:

Buying a piggy bank shouldn't re-trigger the “+2” animation.
- Piggy banks cost 9 coins, so to test this, you need to click the toonie 5 times, and then click "Buy Piggy Bank"
Clicking the toonie should still show the “+2” animation
The “+2” animation should still not be shown when the page first loads.

Code Playground

import React from 'react';

import BigCoin from './BigCoin';

import FloatingText from './FloatingText';

import styles from './App.module.css';

const PIGGY_BANK_COST = 9;

function App() {

const [numOfCoins, setNumOfCoins] = React.useState(0);

const [numOfPiggyBanks, setNumOfPiggyBanks] = React.useState(0);

function buyPiggyBank() {

setNumOfCoins(numOfCoins - PIGGY_BANK_COST);

setNumOfPiggyBanks(numOfPiggyBanks + 1);

}

return (

<main>

<BigCoin

numOfCoins={numOfCoins}

setNumOfCoins={setNumOfCoins}

{numOfCoins > 0 && (

</FloatingText>

</div>

)}

<button

disabled={numOfCoins < PIGGY_BANK_COST}

className={styles.shopItem}

onClick={buyPiggyBank}

Buy Piggy Bank

{numOfPiggyBanks > 0 && (

`(${numOfPiggyBanks})`

)}

</button>

</main>

Your coin balance:

<strong>{numOfCoins}</strong>

</footer>

</div>

);

}

export default App;

Solution:

Two notes about this:

In the solution video, piggy banks cost 10 coins, rather than 9. I decreased the cost after filming this video, to highlight the issue we're trying to fix. The "+2" animation is already hidden when the user has 0 coins.
Discord user AbiTyasTunggal came up with a solution that doesn't require a new state variable! I think I prefer it to my solution. I'll share it in the solution block below.

Solution code (success)

My original solution:

// App.js
import React from 'react';

import BigCoin from './BigCoin';
import FloatingText from './FloatingText';
import styles from './App.module.css';

const PIGGY_BANK_COST = 9;

function App() {
  const [numOfCoins, setNumOfCoins] = React.useState(0);
  const [numOfPiggyBanks, setNumOfPiggyBanks] = React.useState(0);

  const [floatingTextKey, setFloatingTextKey] = React.useState('initial');

  function clickCoin() {
    setNumOfCoins(numOfCoins + 2);
    setFloatingTextKey(crypto.randomUUID());
  }

  function buyPiggyBank() {
    setNumOfCoins(numOfCoins - PIGGY_BANK_COST);
    setNumOfPiggyBanks(numOfPiggyBanks + 1);
  }

  return (
    <div className={styles.wrapper}>
      <main>
        <BigCoin handleClickCoin={clickCoin} />

        {floatingTextKey !== 'initial' && (
          <div className={styles.floatingNumWrapper}>
            <FloatingText key={floatingTextKey}>+2</FloatingText>
          </div>
        )}

        <button
          disabled={numOfCoins < PIGGY_BANK_COST}
          className={styles.shopItem}
          onClick={buyPiggyBank}
        >
          Buy Piggy Bank
          {numOfPiggyBanks > 0 && `(${numOfPiggyBanks})`}
        </button>
      </main>
      <footer>
        Your coin balance:
        <strong>{numOfCoins}</strong>
      </footer>
    </div>
  );
}

export default App;



// BigCoin.js
import React from 'react';

import VisuallyHidden from './VisuallyHidden';
import styles from './BigCoin.module.css';

function BigCoin({ handleClickCoin }) {
  return (
    <div className={styles.coinWrapper}>
      <button
        className={styles.coin}
        onClick={handleClickCoin}
      >
        <VisuallyHidden>
          Add 2 coins
        </VisuallyHidden>
        <img
          alt=""
          className={styles.coinImage}
          src="/img/toonie.png"
        />
      </button>
    </div>
  );
}

export default BigCoin;

AbiTyasTunggal's solution:

import React from 'react';

import BigCoin from './BigCoin';
import FloatingText from './FloatingText';
import styles from './App.module.css';

const PIGGY_BANK_COST = 9;

function App() {
  const [numOfCoins, setNumOfCoins] = React.useState(0);
  const [numOfPiggyBanks, setNumOfPiggyBanks] = React.useState(0);

  // We can calculate how many coins the user has earned by
  // adding the value of all owned piggy banks to their current
  // coin balance:
  const totalCoinsEarned =
    numOfCoins + numOfPiggyBanks * PIGGY_BANK_COST;

  function buyPiggyBank() {
    setNumOfCoins(numOfCoins - PIGGY_BANK_COST);
    setNumOfPiggyBanks(numOfPiggyBanks + 1);
  }

  return (
    <div className={styles.wrapper}>
      <main>
        <BigCoin
          numOfCoins={numOfCoins}
          setNumOfCoins={setNumOfCoins}
        />

        {totalCoinsEarned > 0 && (
          <div className={styles.floatingNumWrapper}>
            {/*
              Use this derived value as the key, since
              it won't change when the user buys a
              piggy bank!
            */}
            <FloatingText key={totalCoinsEarned}>
              +2
            </FloatingText>
          </div>
        )}

        <button
          disabled={numOfCoins < PIGGY_BANK_COST}
          className={styles.shopItem}
          onClick={buyPiggyBank}
        >
          Buy Piggy Bank
          {numOfPiggyBanks > 0 && (
            `(${numOfPiggyBanks})`
          )}
        </button>
      </main>
      <footer>
        Your coin balance:
        <strong>{numOfCoins}</strong>
      </footer>
    </div>
  );
}

export default App;